<template>
  <div>
    <div class="page-header">
      <h1 class="page-title">应用概览</h1>
      <p class="page-description">管理和监控您的所有应用程序</p>
    </div>

    <!-- 操作栏 -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex gap-4">
        <input 
          v-model="searchQuery"
          type="text" 
          placeholder="搜索应用..."
          class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <select v-model="statusFilter" class="px-4 py-2 border border-gray-300 rounded-lg">
          <option value="">所有状态</option>
          <option value="running">运行中</option>
          <option value="stopped">已停止</option>
          <option value="error">错误</option>
        </select>
      </div>
      <button @click="showDeployDialog = true" class="btn btn-primary">
        + 部署新应用
      </button>
    </div>

    <!-- 应用列表 -->
    <div class="grid gap-4">
      <div v-for="app in filteredApplications" :key="app.id" class="card">
        <div class="card-content">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <span class="text-blue-600 font-bold text-lg">{{ app.name.charAt(0).toUpperCase() }}</span>
              </div>
              <div>
                <h3 class="font-semibold text-lg">{{ app.name }}</h3>
                <p class="text-gray-500">{{ app.description }}</p>
                <div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
                  <span>版本: {{ app.version }}</span>
                  <span>实例: {{ app.instances }}</span>
                  <span>更新: {{ app.lastUpdated }}</span>
                </div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="px-3 py-1 rounded-full text-sm font-medium"
                    :class="getStatusClass(app.status)">
                {{ getStatusText(app.status) }}
              </span>
              <div class="flex gap-2">
                <button class="btn btn-sm btn-secondary">查看</button>
                <button class="btn btn-sm btn-secondary">编辑</button>
                <button class="btn btn-sm btn-danger">删除</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="filteredApplications.length === 0" class="text-center py-12">
      <div class="text-gray-400 text-lg mb-4">暂无应用</div>
      <button @click="showDeployDialog = true" class="btn btn-primary">
        部署您的第一个应用
      </button>
    </div>

    <!-- 部署应用对话框 -->
    <DeployDialog
      v-if="showDeployDialog"
      @close="showDeployDialog = false"
      @deployed="handleAppDeployed"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import DeployDialog from '@/components/DeployDialog.vue'

interface Application {
  id: string
  name: string
  description: string
  version: string
  instances: number
  status: 'running' | 'stopped' | 'error'
  lastUpdated: string
}

const searchQuery = ref('')
const statusFilter = ref('')
const showDeployDialog = ref(false)

// 模拟应用数据
const applications = ref<Application[]>([
  {
    id: '1',
    name: 'web-frontend',
    description: '前端Web应用',
    version: 'v1.2.3',
    instances: 3,
    status: 'running',
    lastUpdated: '2小时前'
  },
  {
    id: '2',
    name: 'api-gateway',
    description: 'API网关服务',
    version: 'v2.1.0',
    instances: 2,
    status: 'running',
    lastUpdated: '5小时前'
  },
  {
    id: '3',
    name: 'user-service',
    description: '用户管理服务',
    version: 'v1.0.1',
    instances: 1,
    status: 'error',
    lastUpdated: '1天前'
  },
  {
    id: '4',
    name: 'notification-service',
    description: '通知服务',
    version: 'v1.1.0',
    instances: 1,
    status: 'stopped',
    lastUpdated: '3天前'
  }
])

const filteredApplications = computed(() => {
  return applications.value.filter(app => {
    const matchesSearch = app.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                         app.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesStatus = !statusFilter.value || app.status === statusFilter.value
    return matchesSearch && matchesStatus
  })
})

const getStatusClass = (status: string) => {
  switch (status) {
    case 'running':
      return 'bg-green-100 text-green-800'
    case 'stopped':
      return 'bg-gray-100 text-gray-800'
    case 'error':
      return 'bg-red-100 text-red-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'running':
      return '运行中'
    case 'stopped':
      return '已停止'
    case 'error':
      return '错误'
    default:
      return '未知'
  }
}

// 处理应用部署成功
const handleAppDeployed = (deployedApp: any) => {
  // 添加新部署的应用到列表
  const newApp: Application = {
    id: Date.now().toString(),
    name: deployedApp.name,
    description: `部署的应用: ${deployedApp.image}`,
    version: 'v1.0.0',
    instances: deployedApp.replicas,
    status: 'running',
    lastUpdated: '刚刚'
  }

  applications.value.unshift(newApp)
  showDeployDialog.value = false

  // 可以添加成功提示
  console.log('应用部署成功:', deployedApp)
}
</script>

<style scoped>
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.text-center {
  text-align: center;
}

.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}
</style>
